<template>
	<view class="u-rela">
		<view class="u-rela layout">
			<swiper class="swiper" circular @change="swiperChange">
				<swiper-item >
					<image mode="aspectFill" class="goods-img" :src="$fullLink(info.coverUrl)" @tap="previewImage"></image>
				</swiper-item>
			</swiper>
			<view class="indicators u-abso u-flex">
				<view class="indicators-item u-m-r-4" :class="{ 'indicators-active': index === current }" v-for="(item, index) in imageList" :key="index"></view>
			</view>
		</view>
		<view class="bg-white u-p-t-20 u-p-b-40 u-p-l-30 u-p-r-30">
			<view class="u-m-b-30 u-flex u-flex-between ">
				<view class="price u-font-48">
					{{$unitEn}}{{ info.price || 0 }}
				</view>
				<!-- <image class="share-icon" :src="$staticPath('layout/basics/share1.png')" @tap="share" /> -->
			</view>

			<view class="u-font-32 fw-500 u-m-b-20 u-rela">
				{{ info.title }}
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN ||MP-ALIPAY-->
		<share-popup type="1" :mpShareUrl="mpShareUrl" :show="sharePopupShow" @close="sharePopupShow = false"></share-popup>
		<!-- #endif -->
		<view class="canvas-box  u-abso ">
			<canvas ref="canvas" class="yuncangGoods-canvas" id="yuncangGoods-canvas" canvas-id="yuncangGoods-canvas"></canvas>
		</view>
	</view>
</template>

<script>
	import { drawQuadrilateral, drawQRCode, drawRoundedRectangle, drawText, drawArrowRectangle, getTextLineHeight } from 'common/canvas.js'
	/* 引入uqrcode核心js */
	import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'
export default {
	props: {
		info: Object
	},
	data() {
		return {
			imageList: [],
			current: null,
			sharePopupShow:false,
			mpShareUrl:''
		}
	},
	watch: {
		info(newValue) {
			if (newValue.imgUrls) {
				this.imageList = [newValue.coverUrl]
			}
		}
	},
	methods: {
		swiperChange(e) {
			this.current = e.detail.current
		},
		previewImage() {
			uni.previewImage({
				current:0,
				urls: [this.$fullLink(this.info.coverUrl)]
			})
		},
		draw(shareUrl) {
			uni.getImageInfo({
				src: this.$fullLink(this.info.coverUrl),
				success: async res => {
					let ctx = null
					/* 获取绘图所需的上下文 */
					ctx = uni.createCanvasContext('yuncangGoods-canvas', this)
					ctx.draw() // 清空画布内容
					ctx.setFillStyle('#fff')
					ctx.fillRect(0, 0, 290, 290)
					ctx.drawImage(res.path, 0, 0, 290, 290)
					let { title = '', price } = this.info
					const $unitEn = this.$unitEn
					drawText(ctx, {
						x: 20,
						y: 320,
						text: $unitEn,
						size: 10,
						fillStyle: '#F5222D',
						font: 'normal normal bold 10px'
					})
					drawText(ctx, {
						x: 22 + ctx.measureText($unitEn).width,
						y: 320,
						text: price,
						size: 22,
						fillStyle: '#F5222D',
						font: 'normal normal bold 22px'
					})
					canvasCtx.setFontSize(14);
					let { row: textList } = getTextLineHeight(ctx, {
						w: 100,
						text: title
					})
					drawText(ctx, {
						x: 20,
						y: 348,
						text: textList[0],
						size: 14,
						fillStyle: '#333',
						font: 'normal normal bold 14px'
					})
					if (textList.length > 2) {
						textList[1] = textList[1].substr(0, textList[1].length - 2) + '...'
					}
					textList[1] &&
						drawText(ctx, {
							x: 20,
							y: 368,
							text: textList[1],
							size: 14,
							fillStyle: '#333',
							font: 'normal normal bold 14px'
						})
					// #ifdef MP-WEIXIN||MP-ALIPAY
					let getCodePath = () => {
						return new Promise((resolve, reject) => {
							uni.getImageInfo({
								src: this.$fullLink(shareUrl),
								success: res => {
									resolve(res)
								},
								fail: err => {
									reject(err)
								}
							})
						})
					}
					let codePath = await getCodePath()
					if (codePath.path) {
						ctx.drawImage(codePath.path, 208, 310, 65, 65)
					}
					// #endif
					// #ifndef MP-WEIXIN||MP-ALIPAY
					drawRoundedRectangle(ctx, {
						x: 208,
						y: 310,
						width: 65,
						height: 65,
						radius: 0,
						lineWidth: 2,
						strokeStyle: '#E7E7E7'
					})
					drawQRCode(ctx, {
						x: 213,
						y: 315,
						size: 55, //二维码大小
						margin: 0, // 填充边距
						modules: uqrcode.getModules({
							id: 'yuncangGoods-canvas', //canvasId
							mode: 'canvas', // 生成模式
							size: 55, //二维码大小
							margin: 0, // 填充边距
							backgroundColor: '#fff', // 背景色
							foregroundColor: '#000', // 前景色
							errorCorrectLevel: uqrcode.errorCorrectLevel.H, // 纠错等级,
							text: shareUrl
						})
					})
					// #endif
		
					ctx.draw(false, () => {
						this.toTempFilePath()
					})
				}
			})
		},
		toTempFilePath() {
			uni.canvasToTempFilePath(
				{
					canvasId: 'yuncangGoods-canvas',
					fileType: 'jpg',
					width: 560,
					height: 780,
					success: res => {
						uni.hideLoading()
						this.mpShareUrl = res.tempFilePath
						this.showShare()
					},
					fail: err => {},
					complete: res => {}
				},
				this
			)
		},
		share() {
			uni.showLoading({
				title: 'loading...'
			})
			this.$emit('getQRCodeUrl', res => {
				if (res.code === 200) {
					this.draw(res.shareUrl)
				} else {
					uni.hideLoading()
				}
			})			
		},
		showShare() {
			// #ifdef MP-WEIXIN
			wx.showShareImageMenu({
				path: this.mpShareUrl
			})
			// #endif
			// #ifndef MP-WEIXIN
			this.sharePopupShow = true
			// #endif
		}
	}
}
</script>

<style lang="scss" scoped>
.goods-img {
	width: 100%;
	height: 750rpx;
}
.swiper {
	white-space: nowrap;
	height: 750rpx;
}
.indicators {
	left: 358rpx;
	top: 702rpx;
	z-index: $z-index-normal;
	.indicators-item {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: #c6ccd7;
	}
	.indicators-active {
		width: 16rpx;
		border-radius: 4rpx;
		background-color: #989fad;
	}
}
.price {
	color: $base-color-red;
}
.scribe {
	font-size: 26rpx;
	line-height: 32rpx;
	height: 34rpx;
	&::after {
		content: '';
		width: 100%;
		height: 2rpx;
		background-color: rgba(179, 179, 179, 1);
		position: absolute;
		top: 16rpx;
		left: 0;
	}
}
.indent {
	padding-left: 10rpx;
}
.share-icon {
	width: 40rpx;
	height: 40rpx;
}
.share-box {
	right: -20rpx;
	border-radius: 40rpx 0 0 40rpx;
	background-color: rgba(180, 180, 180, 1);
	padding: 16rpx 20rpx;
}
.canvas-box {
	left: -9999px;
	top: -9999px;
	.yuncangGoods-canvas {
		width: 290px;
		height: 390px;
		font-kerning: normal;
	}
}
</style>
